// Only handles right direction for now...

.base-shape {
  display: block;
  content: '';
}

@mixin triangle($direction: down, $size: 30px, $color: black) {
  @extend .base-shape;
  width: 0;
  height: 0;

  @if $direction == down {
    border-left: $size/2 solid transparent;
    border-right: $size/2 solid transparent;
    border-top: $size solid $color;
    border-bottom: 0;
  } @else if $direction == right {
    border-top: $size/2 solid transparent;
    border-bottom: $size/2 solid transparent;
    border-left: $size solid $color;
    border-right: 0;
  } @else if $direction == left {
    border-top: $size/2 solid transparent;
    border-bottom: $size/2 solid transparent;
    border-right: $size solid $color;
    border-left: 0;
  } @else if $direction == up {
    border-left: $size/2 solid transparent;
    border-right: $size/2 solid transparent;
    border-bottom: $size solid $color;
    border-top: 0;
  }
}